/*
 说明： 在引入该文件前面必须先引入jQuery。在div中进行调用。$('#id').carouselFigure(imgs,status,time)
  imgs : 代表轮播的图片的相对地址。
  status： 是否显示左右按钮。默认不显示。传入 true 则显示。
  time： 代表轮播替换的时间。默认4000（4s）.
*/

;(function($){
    $.fn.swiperSlide=function(imgs,state,time){
        $(this).append('<div class="mod-tab"> <ul id="list"> <li class="tab-con" style="opacity: 1"><span class="pic"><a href="#" style="background-image: url('+imgs[0]+')"></a> </span></li>');
        for(let i=0;i<imgs.length;i++){
            $(this).find('#list').append('<li class="tab-con" style="opacity: 0"><span class="pic"><a href="#" style="background-image: url('+imgs[i+1]+')"></a></span></li>');
        }
        $(this).find('.mod-tab').append('</ul> <div id="gb-tab" class="gb-tab"><a href="javascript:;" class="item2" ></a>');
        for(let i=1;i<imgs.length;i++){
            $(this).find('#gb-tab').append('<a href="javascript:;" class="item" ></a>');
        }

        $(this).find('.mod-tab').append(' </div><a href="javascript:;" id="prev" class="arrow">&lt;</a> <a href="javascript:;" id="next" class="arrow">&gt;</a>');

        $(this).append(' </div>');

        const buttons = $('#gb-tab a');
        const list = $('#list li');
        const prev = $('#prev');
        const next = $('#next');
        const wrap = $('.warp');
        var timer;
        var index=1;
        var switchTime = time || 4000;

        wrap.mouseover(function(){
            stop()
        });
    
        wrap.mouseout(function(){
            autoPlay()
        });
    
        for(let i=0;i<buttons.length;i++){
          (function(i){
              buttons[i].onclick=function(){
                 index=i+1;
                 imgShow();
                 buttonShow();
              }
          })(i)
        };
    
        if(state){
            prev.click(function(){
                index=index-1;
        
                if(index < 1){
                    index = 5;
                }
        
                imgShow();
                buttonShow();
            });
        
            next.click(function(){
                index = index + 1;
        
                if(index > 5){
                    index = 1;
                }
        
                imgShow();
                buttonShow();
            });
        }else{
            $(this).find('#prev').css('display','none');
            $(this).find('#next').css('display','none');
        }
        

        function imgShow(){
            for(let i=0;i<list.length;i++){
                if(list.eq(i).css('opacity')==1){
                    list.eq(i).fadeTo(1000,0);
                }
            }
        
            list.eq(index-1).fadeTo(1000,1);
        };
        
        function buttonShow(){
            for(let i=0;i<buttons.length;i++){
                if(buttons[i].className=='item2'){
                    buttons[i].className='item';
                }
            }
        
            buttons[index-1].className='item2';
        };
        
        function autoPlay(){
            timer=setInterval(function(){
                index = index + 1;
        
                if(index > 5){
                    index = 1;
                }
        
                imgShow();
                buttonShow();
            },switchTime)
        };
        
        function stop(){
            clearInterval(timer);
        };

        autoPlay();
        
    }
})(jQuery);



